/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {Text} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import Home from './src/pages/Home.tsx';
import DetailPage from './src/pages/DetailPage.tsx';
import SelectFilesDemo from './src/pages/SelectFilesDemo.tsx';
import Test1 from './src/pages/Test1.tsx';
import Test2 from './src/pages/Test2.tsx';


function TabbarIcon( {size,color,icon} ):React.JSX.Element {
  return (<Text style={{fontSize:size,color}}>{icon}</Text>); // 自定义图标
}

//底部标签导航器
const TabBar = createBottomTabNavigator();
function HomeTabs() {
  return (
    <TabBar.Navigator>
      <TabBar.Screen
        name="Home"
        options={{
          title: '首页',
          tabBarIcon: ({size,color})=><TabbarIcon size={size} color={color} icon="🏠" />,
          tabBarLabel: '首页', // 自定义标签文本
        }}
        component={Home}
      />
      <TabBar.Screen
        name="SelectFilesDemo"
        options={{
          title: '选择文件',
          tabBarIcon: ({size,color})=><TabbarIcon size={size} color={color} icon="📁" />,
          tabBarLabel: '选择文件', // 自定义标签文本
        }}
        component={SelectFilesDemo}
      />
      <TabBar.Screen
        name="Details"
        options={{
          title: '详情',
          tabBarIcon: ({size,color})=><TabbarIcon size={size} color={color} icon="📝" />, 
          tabBarLabel: '详情', // 自定义标签文本
        }}
        component={DetailPage}
      />
    </TabBar.Navigator>
  );
}

//header 导航器
const Stack = createNativeStackNavigator();
function StackNavigator(): React.JSX.Element {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeTabs" component={HomeTabs} options={{headerShown: false}} />
      <Stack.Screen name="Test1" component={Test1} options={{title: 'Test1'}}/>
      <Stack.Screen name="Test2" component={Test2} options={{title: 'Test2'}}/>
    </Stack.Navigator>
  );
}

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

export default App;
